<template>
  <div class="cephalosome">
    <!-- <dv-loading>Loading...</dv-loading> -->
    <!-- 大屏 -->
    <dv-full-screen-container class="esord">
      <!-- 头部标题 -->
      <div class="header" ref="main">
        <img src="@/assets/img/head.png" style="width: 100%; height: 5rem" />
        <!-- 年月日 时间 星期 -->
        <div class="heder_time">
          <span class="time">{{nowTime}}</span>
          <span>{{nowDate}}</span>
          <span>{{nowWeek}}</span>
        </div>
      </div>
      <!-- 内容 -->
      <!-- 工作视频 -->
      <div class="video">
        <!-- left -->
        <div>
          <!-- box1 -->
          <div class="video-box">
            <div class="box-title">工程视频</div>
            <div class="box-content">
              <el-select v-model="videoValue" filterable placeholder="请选择" style="width: 100%">
                <el-option v-for="item in videoOptions" :key="item.code" :label="item.code" :value="item.code"></el-option>
              </el-select>
              <video src="video/工程1.mp4" controls width="100%" height="280px" poster="/video/img_cover.png" autoplay></video>
            </div>
          </div>

          <!-- box2 -->
          <div class="video-box2">
            <div class="box-title">工程违建排名</div>
            <div class="box-content">
              <dv-scroll-ranking-board :config="progressConfig" style="width:367px;height:450px" />
            </div>
          </div>
        </div>
        <!-- conter -->
        <div style="padding: 0 10px; flex: 1">
          <!-- box3 -->
          <div class="video-box3">
            <div class="box3-pos">
              <div class="box3-list">
                <div v-for="(item, index) in boxList3" :key="index">
                  <img :src="item.url" />
                  <div class="text">
                    <div>{{form[item.key]}}</div>
                    <div class="lable">{{item.label}}</div>
                  </div>
                </div>
              </div>
            </div>
            <div id="container">
              <baidu-map mapType="BMAP_SATELLITE_MAP" :center="center" :zoom="zoom" @ready="handler" style="width: 100%; height: 100%">
                <bm-marker
                  v-for="(item, index) in videoOptions"
                  :key="index + '_'"
                  :position="{ lng: item.lng, lat: item.lat }"
                  :icon="{
                    url: require('../assets/img/map_monitoring.png'),
                    size: { width: 100, height: 150 },
                  }"
                  @click="clickablemap(item)"
                ></bm-marker>
              </baidu-map>
            </div>
          </div>
          <!-- 违规信息统计 -->
          <div class="video-box4">
            <div class="box-title">违规信息统计</div>
            <div class="box4-content box-content">
              <div class="box4-content-left">
                <div v-for="(item, index) in boxList4" :key="index" class="box4-list">
                  <img :src="item.url" style="width: 65px; height: 65px;margin-right: 20px;" />
                  <div>
                    <div class="text">{{item.num}}</div>
                    <div class="label" :style="`color:${item.color};font-size: 18px`">{{item.label}}</div>
                  </div>
                </div>
              </div>
              <div class="box4-chart">
                <div id="main" style="width: 100%; height: 100%"></div>
              </div>
            </div>
          </div>
        </div>
        <!-- right -->
        <div>
          <!-- 报警信息 -->
          <div class="video-box5">
            <div class="box-title">报警信息</div>
            <div class="box-content">
              <div class="alarm_form">
                <dv-scroll-board :config="config" @click="onClickScrollBoard" style="width: 100%; height: 100%"></dv-scroll-board>
              </div>
            </div>
          </div>

          <!-- 违章安全检测 -->
          <div class="video-box6">
            <div class="box-title">违章安全监测</div>
            <div class="safe_conten">
              <div class="conten_violator">
                <img src="@/assets/img/safe_helmet.png" />
                <div class="violator_text">
                  <div class="violator_violator">安全帽违规</div>
                  <div class="violator_two">
                    <div class="two_one">0</div>
                    <div class="two_one">0</div>
                    <div class="two_one">0</div>
                    <div class="two_one">3</div>
                    <div class="two_one">3</div>
                    <div class="two_one">5</div>
                    <div class="two_owe">次</div>
                  </div>
                  <div class="violator_violator">
                    <div class="three_month">较上月</div>
                    <img src="../assets/img/therr_lite.png" />
                    <span>2%</span>
                  </div>
                </div>
              </div>
              <div class="conten_violator">
                <img src="@/assets/img/safe_replica.png" />
                <div class="violator_text">
                  <div class="violator_violator">打电话违规</div>
                  <div class="violator_two">
                    <div class="two_one">0</div>
                    <div class="two_one">0</div>
                    <div class="two_one">0</div>
                    <div class="two_one">3</div>
                    <div class="two_one">3</div>
                    <div class="two_one">5</div>
                    <div class="two_owe">次</div>
                  </div>
                  <div class="violator_violator">
                    <div class="three_month">较上月</div>
                    <img src="../assets/img/therr_dropdrop.png" />
                    <span style="color: red">2%</span>
                  </div>
                </div>
              </div>
              <div class="conten_violator">
                <img src="@/assets/img/safe_smoking.png" />
                <div class="violator_text">
                  <div class="violator_violator">抽烟违规</div>
                  <div class="violator_two">
                    <div class="two_one">0</div>
                    <div class="two_one">0</div>
                    <div class="two_one">0</div>
                    <div class="two_one">3</div>
                    <div class="two_one">3</div>
                    <div class="two_one">5</div>
                    <div class="two_owe">次</div>
                  </div>
                  <div class="violator_violator">
                    <div class="three_month">较上月</div>
                    <img src="../assets/img/therr_lite.png" />
                    <span>2%</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 报警信息------弹框 -->
      <!-- 抽烟违规 -->
      <div class="fullscreen" v-if="popup_smoking">
        <div class="popup">
          <div class="popup_header">
            <div>违规视频信息</div>
            <div @click="onClickpopup">
              <img src="../assets/img/popup_close.png" style="width: 28px; height: 28px" />
            </div>
          </div>
          <div class="popup_video">
            <div class="videos">
              <div class="videos_os1">违规视频</div>
              <div class="videos_illegal">
                <video :src="videosForm.videoUrl" controls width="100%" height="100%" poster="/video/img_cover.png" autoplay></video>
              </div>
            </div>
            <div class="videos">
              <div class="videos_os1">抓拍照片</div>
              <div class="videos_imgsrc">
                <el-carousel :autoplay="false" height="13rem">
                  <el-carousel-item v-for="item in videosForm.imgsUrl" :key="item">
                    <img :src="item" style="width: 25rem; height: 13rem" />
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
          </div>
          <div class="popup_button">视频识别结果:{{videosForm.type}}</div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import videojs from 'video.js'
import * as echarts from 'echarts'
export default {
  name: 'APP',
  data() {
    return {
      videosForm: {
        videoUrl: 'video/工程1.mp4',
        imgsUrl: []
      },
      videoValue: '',
      form: {
        stationTotal: 0,
        onlineTotal: 0
      },
      videoOptions: [],
      progressConfig: {
        rowNum: 10,
        data: [
          {
            value: 25.6,
            name: '杭州'
          },
          {
            value: 76.7,
            name: '宁波'
          },
          {
            value: 66.6,
            name: '绍兴'
          },
          {
            value: 23.2,
            name: '温州'
          },
          {
            value: 25.6,
            name: '金华'
          },
          {
            value: 76.7,
            name: '衢州'
          },
          {
            value: 66.6,
            name: '台州'
          },
          {
            value: 62.2,
            name: '湖州'
          },
          {
            value: 32.6,
            name: '舟山'
          },
          {
            value: 20.0,
            name: '丽水'
          }
        ]
      },
      boxList3: [
        {
          url: require('../assets/img/map_engineer.png'),
          num: '0',
          key: 'stationTotal',
          label: '工程总数（个）'
        },
        // {
        //   url: require('../assets/img/map_construction.png'),
        //   num: '0',
        //   label: '工地总数（个）'
        // },
        // {
        //   url: require('../assets/img/map_equipment.png'),
        //   num: '0',
        //   label: '设备总数量（个）'
        // },
        {
          url: require('../assets/img/map_equipment.png'),
          num: '0',
          key: 'onlineTotal',
          label: '设备在线数量（个）'
        }
      ],
      boxList4: [
        {
          url: require('../assets/img/text_safety.png'),
          num: '335',
          label: '安全帽违规(次)',
          color: '#02D8FF'
        },
        {
          url: require('../assets/img/text_smoking.png'),
          num: '335',
          label: '抽烟违规(次)',
          color: '#FDCF06'
        },
        {
          url: require('../assets/img/text_phone.png'),
          num: '335',
          label: '打电话违规(次)',
          color: '#00FFC3'
        }
      ],
      // new
      activeName: '1',
      charts: '',
      expList: [],
      popup_smoking: false, //抽烟违规
      popup_helmet: false, //安全帽违规
      popup_playphone: false, //玩手机违规
      popup_ringup: false, //打电话违规
      center: {
        lng: 103.80243482795,
        lat: 25.496406931544
      },
      zoom: 15, //地图
      timeInterval: null, // 定时刷新函数 计时
      nowDate: '', // 当前日期
      nowTime: '', // 当前时间
      nowWeek: '', // 当前星期
      map: null,
      config: {
        headerBGC: '#od2b35',
        waitTime: 2000,
        rowNum: 8,
        header: ['告警信息', '告警原因', '告警时间', '操作'],
        data: [
          // [
          //   '<span style="color:#fff;font-size:0.8rem">工程1</span>',
          //   '<span style="color:#FFF000 ;font-size:0.8rem">抽烟违规</span>',
          //   '<span style="display: block;color:#FFFFFF;font-size:0.8rem;margin-left: -10px;">09-07 9:47:15</span>',
          //   '<span style="color:#3FEED9  ;font-size:0.8rem" @click="fsdafs">查看视频</span>'
          // ]
        ]
      }
    }
  },
  computed: {},
  watch: {},
  mounted() {
    let that = this
    this.onIntervalTimeNow()
    this.onGetTimeNow()
    this.getExpData()
    setTimeout(function () {
      that.drawLine() //周
    }, 1000)

    setTimeout(function () {
      that.clickcake()
    }, 1200)

    setTimeout(() => {
      videojs('my-video', function () {
        this.play()
      })
    }, 300)
  },
  beforeDestroy() {
    let that = this
    // 销毁计时器
    if (that.timeInterval) {
      clearInterval(that.timeInterval)
      that.timeInterval = null
    }
  },
  components: {},
  methods: {
    getVideoList() {
      this.$axios.get(`/apiUrl/security/safeStation/indexList?area=330281`, {}).then(response => {
        if (response.code == 0) {
          this.videoOptions = response.indexMap.stationList
          this.form.onlineTotal = response.indexMap.onlineTotal
          this.form.stationTotal = response.indexMap.stationTotal
          // this.videoOptions = response.indexMap.areaList
          this.map.centerAndZoom(new BMap.Point(this.videoOptions[0].lng, this.videoOptions[0].lat), 16) //修改中心点，缩放比例
        } else {
          this.$message({
            showClose: true,
            message: response.msg,
            type: 'warning' //error success
          })
        }
      })
    },
    // 违规
    getExpData() {
      this.$axios.get(`/apiUrl/security/safecheckInfo?type=2&area=330281`, {}).then(response => {
        if (response.code == 0) {
          this.expList = response.page.map(item => {
            let arr = []
            // arr.push(`<span style="color:#fff;font-size:0.8rem">${item.stationName}</span>`)
            arr.push(`<span style="color:#fff;font-size:0.8rem">dd工地</span>`)
            arr.push(`<span style="color:#FFF000 ;font-size:0.8rem">${item.safeTypeName}</span>`)
            arr.push(`<span style="display: block;color:#FFFFFF;font-size:0.8rem;margin-left: -10px;">${item.checkDate}</span>`)
            arr.push(`<span style="color:#3FEED9  ;font-size:0.8rem;cursor:pointer;">查看视频</span>`)
            this.config.data.push(arr)
            return item
          })
          this.config = { ...this.config }
        } else {
          this.$message({
            showClose: true,
            message: response.msg,
            type: 'warning'
          })
        }
      })
    },
    // echarts 线形图 周
    drawLine() {
      this.charts = echarts.init(document.getElementById('main'))
      this.charts.setOption({
        color: ['#00DEFF', '#FFDC0C', '#00FFC3'],
        title: {
          text: '单位：次',
          textStyle: {
            color: '#FFFFFF',
            fontSize: 12,
            fontWeight: 400
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: [
            {
              name: '安全帽',
              textStyle: {
                fontSize: 16,
                color: '#00DEFF'
              },
              icon: 'stack'
            },
            {
              name: '抽烟',
              textStyle: {
                fontSize: 16,
                color: '#FFDC0C'
              },
              icon: 'stack'
            },
            {
              name: '打电话',
              textStyle: {
                fontSize: 16,
                color: '#00FFC3'
              },
              icon: 'stack'
            }
          ]
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              textStyle: {
                color: '#fff' //坐标的字体颜色
              }
            },
            axisTick: {
              show: false //隐藏坐标轴的刻度
            },
            axisLine: {
              lineStyle: {
                color: '#1d39a7' //坐标轴的颜色
              }
            },
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#1d39a7' //坐标轴的颜色
              }
            },
            axisLabel: {
              textStyle: {
                color: '#fff' //坐标的字体颜色
              }
            },
            axisTick: {
              show: false //隐藏坐标轴的刻度
            }
          }
        ],
        series: [
          {
            name: '安全帽',
            type: 'line',
            // stack: '总量',
            areaStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(0, 222, 255, 1)' // 0% 处的颜色
                    },
                    {
                      offset: 0.9,
                      color: 'rgba(20, 222, 255, 0)' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              }
            },
            itemStyle: {
              normal: {
                lineStyle: {
                  color: 'rgba(0, 222, 255, 1)'
                }
              }
            },
            data: [220, 50, 191, 234, 290, 330, 310]
          },
          {
            name: '抽烟',
            type: 'line',
            // stack: '总量',
            areaStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(255, 220, 12, 1)' // 0% 处的颜色
                    },
                    {
                      offset: 0.9,
                      color: 'rgba(255, 220, 12,0)' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              }
            },
            itemStyle: {
              normal: {
                lineStyle: {
                  color: 'rgba(255, 220, 12, 1)'
                }
              }
            },
            data: [150, 100, 201, 154, 190, 330, 410]
          },
          {
            name: '打电话',
            type: 'line',
            areaStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(0, 255, 195, 1)' // 0% 处的颜色
                    },
                    {
                      offset: 0.6,
                      color: 'rgba(0, 255, 195,0)' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              }
            },
            itemStyle: {
              normal: {
                lineStyle: {
                  color: 'rgba(0, 255, 195, 1)'
                }
              }
            },
            data: [320, 332, 301, 334, 390, 330, 320]
          }
        ]
      })
    },
    // echarts 线形图 月
    drawmonth() {
      this.charts = echarts.init(document.getElementById('month'))
      this.charts.setOption({
        textStyle: {
          fontWeight: 'normal', //标题颜色
          color: '#fff'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#fff'
            }
          }
        },
        legend: {
          data: ['安全帽违规', '抽烟违规', '打电话违规']
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {},
        //   },
        // },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['4月', '5月', '6月', '7月', '8月', '9月', '10月']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '安全帽违规',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '抽烟违规',
            type: 'line',
            stack: 'Total',

            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '打电话违规',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [150, 232, 201, 154, 190, 330, 410]
          }
        ],
        color: ['#ffba00', '#7aff2d', '#14d0eb']
      })
    }, // echarts 线形图 年
    drawyear() {
      this.charts = echarts.init(document.getElementById('year'))
      this.charts.setOption({
        textStyle: {
          fontWeight: 'normal', //标题颜色
          color: '#fff'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#fff'
            }
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['2016年', '2017年', '2018年', '2019年', '2020年', '2021年', '2022年']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '安全帽违规',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '抽烟违规',
            type: 'line',
            stack: 'Total',

            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '打电话违规',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [150, 232, 201, 154, 190, 330, 410]
          }
        ],
        color: ['#ffba00', '#7aff2d', '#14d0eb']
      })
    },
    /**
     * 当前系统时间 更新
     * @onIntervalTimeNow ====================  系统时间 每秒更新
     * @onGetTimeNow =========================  系统时间 格式转化及获取
     * */
    onIntervalTimeNow() {
      let that = this
      that.timeInterval = setInterval(() => {
        that.onGetTimeNow()
      }, 1000)
    },
    // echarts 圆饼图
    clickcake() {
      var myChart = echarts.init(document.getElementById('chart'))
      myChart.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 21, name: '安全帽', itemStyle: { color: '#3ae5af' } },
              { value: 35, name: '打电话', itemStyle: { color: '#0354d7' } },
              { value: 17, name: '抽烟', itemStyle: { color: '#fedb4b' } }
            ],
            emphasis: {
              itemStyle: {
                // shadowBlur: 10,
                // shadowOffsetX: 0,
                // shadowColor: "rgba(0, 0, 0, 0.5)",
              }
            }
          }
        ]
      })
    },
    // 时分秒
    onGetTimeNow() {
      var that = this
      let yy = new Date().getFullYear()
      let mm = new Date().getMonth() + 1
      let dd = new Date().getDate()
      let week = new Date().getDay()
      let hh = new Date().getHours()
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      let ms = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      if (week == 1) {
        that.nowWeek = '星期一'
      } else if (week == 2) {
        that.nowWeek = '星期二'
      } else if (week == 3) {
        that.nowWeek = '星期三'
      } else if (week == 4) {
        that.nowWeek = '星期四'
      } else if (week == 5) {
        that.nowWeek = '星期五'
      } else if (week == 6) {
        that.nowWeek = '星期六'
      } else {
        that.nowWeek = '星期日'
      }
      that.nowTime = hh + ':' + mf + ':' + ms
      that.nowDate = yy + '-' + mm + '-' + dd
      // that.nowWeek = week;
    },
    // 地图
    handler({ BMap, map }) {
      this.map = map //把map赋值给变量map
      map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
      // this.map.enableScrollWheelZoom(true), //添加鼠标滚动，地图缩放组件
      //   // this.map.setMapType("BMAP_EARTH_MAP"); // 设置地图类型为地球模式
      // this.map.enableDragging(); //启用地图拖拽，默认启用
      // map.enableInertialDragging(true); // 启用地图惯性拖拽，默认禁用。
      map.enableContinuousZoom(true) // 启用连续缩放效果，默认禁用。
      map.enablePinchToZoom(true) //启用双指操作缩放，默认启用。
      map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
      this.getVideoList()
    },
    // 点击地图跳转
    clickablemap(item) {
      this.$router.push({ path: './camera', query: item })
    },
    // 点击查看视频
    onClickScrollBoard(obj) {
      this.getExpVideo(this.expList[obj.rowIndex].checkId)
      this.videosForm.type = this.expList[obj.rowIndex].safeTypeName
      this.popup_smoking = true
    },
    getExpVideo(checkId) {
      this.$axios.get('/apiUrl/security/safecheckInfo/' + checkId + '?type=2').then(data => {
        if (data.code == 0) {
          let item = data.safeCheck
          let api = sessionStorage.getItem('intelligenceUrl')
          // this.videosForm.videoUrl = api + item.videoUrlPath
          // this.videosForm.imgsUrl = item.unsafeImgPath.map(item => {
          //   return api + item
          // })
          // 改写死
          this.videosForm.videoUrl = `video/${item.safeType}.mp4`
          this.videosForm.imgsUrl = [`video/${item.safeType}.png`]
        }
      })
    },
    // 点击关闭视频
    onClickpopup() {
      this.popup_smoking = false //抽烟违规
      this.popup_helmet = false //安全帽违规
      this.popup_playphone = false //玩手机违规
      this.popup_ringup = false //打电话违规
    },
    // echarts点击年月日
    handleClick(event) {
      let that = this
      if (event._props.name == 2) {
        setTimeout(function () {
          that.drawmonth() //月
        }, 200)
      } else if (event._props.name == 3) {
        setTimeout(function () {
          that.drawyear() //年
        }, 200)
      }
    }
  }
}
</script>

<style  scoped>
/* @import "../assets/css/largescreen.css"; */
@import '../assets/css/largescreenssssss.css'; /* 百分比样式布局 */
* {
  list-style: none;
}
</style>
